<template>
	  <basic-container>
	   <el-form :model="form" ref="form" label-width="200px">
	      <el-form-item label="账户类型:" prop="type" :rules="[{required: true,message: '请选择账户类型'},{min: 0,max: 255,message: '长度在 0 到 1000 个字符'}]">
	      <el-select v-model="form.type" clearable placeholder="请选择">
	      				 <el-option
	      				      v-for="item in typelist"
	      				      :key="item.value"
	      				      :label="item.label"
	      				      :value="item.value">
	      				    </el-option>
	      			 </el-select>
	      </el-form-item>
	<!--      <el-form-item label="备注" prop="description" :rules="[{min: 0,max: 255,message: '长度在 0 到 255 个字符'},]">-->
	<!--        <el-input type="textarea" v-model="form.description"></el-input>-->
	
	<!--      </el-form-item>-->
	   <el-form-item  label="银行开户名:" prop="bankKhName" :rules="[{required: true,message: '请输入银行开户名'},{min: 0,max: 255,message: '长度在 0 到 1000 个字符'}]">
	      <el-input  v-model="form.bankKhName"></el-input>	
	   </el-form-item>
	   <el-form-item label="银行卡号:" prop="bankNo" :rules="[{required: true,message: '请输入银行卡号'},{min: 0,max: 255,message: '长度在 0 到 1000 个字符'}]">
	      <el-input v-model="form.bankNo"></el-input>	
	   </el-form-item>
	   <el-form-item label="开户银行:" prop="khBank" :rules="[{required: true,message: '请输入开户银行'},{min: 0,max: 255,message: '长度在 0 到 1000 个字符'}]">
	      <el-input  v-model="form.khBank"></el-input>	
	   </el-form-item>
	   <el-form-item label="开户支行省份:" prop="khProvince" :rules="[{required: true,message: '请选择开户支行省份'},{min: 0,max: 255,message: '长度在 0 到 1000 个字符'}]">
		  <el-select v-model="form.khProvince" clearable placeholder="请选择" @change="changeprovine(form.khProvince)">
		  				 <el-option
		  				      v-for="item in provincelist"
		  				      :key="item.value"
		  				      :label="item.value"
		  				      :value="item.value">
		  				    </el-option>
		  			 </el-select>
		  
	   </el-form-item>
	   <el-form-item label="开户支行城市:" prop="khCity" :rules="[{required: true,message: '请选择开户支行城市'},{min: 0,max: 255,message: '长度在 0 到 1000 个字符'}]">
		  <el-select v-model="form.khCity" clearable placeholder="请选择">
		  				 <el-option
		  				      v-for="item in citylist"
		  				      :key="item.value"
		  				      :label="item.value"
		  				      :value="item.value">
		  				    </el-option>
		  			 </el-select>
	   </el-form-item>
	   <el-form-item label="开户支行名称:" prop="khZhName" :rules="[{required: true,message: '请选择开户支行名称'},{min: 0,max: 255,message: '长度在 0 到 1000 个字符'}]">
		  <el-select v-model="form.khZhName" clearable placeholder="请选择">
		  				 <el-option
		  				      v-for="item in zhNamelist"
		  				      :key="item.value"
		  				      :label="item.value"
		  				      :value="item.value">
		  				    </el-option>
		  			 </el-select>
		  
	   </el-form-item>
	   <el-form-item label="开户人身份证号:" prop="khPeopleid" :rules="[{required: true,message: '请输入开户人身份证账号'},{min: 0,max: 18,message: '请输入正确的开户人身份证号'}]">
	      <el-input  v-model="form.khPeopleid"></el-input>	
	   </el-form-item>
	   <el-form-item label="开户人手机号:" prop="khPhone" :rules="[{required: true,message: '请输入开户人手机号'},{min: 0,max: 11,message: '请输入正确手机号'}]">
	      <el-input  v-model="form.khPhone"></el-input>	
	   </el-form-item>
	   <el-form-item label="验证码:" prop="phoneCode" :rules="[{required: true,message: '请输入短信验证码'},{min: 0,max: 1000,message: '长度在 0 到 1000 个字符'}]">
	      <el-input style="width: 85%;"  v-model="form.phoneCode"></el-input>	<el-button style="width: 14%;">发送验证码</el-button>
	   </el-form-item>
	   <el-form-item label="请上传银行卡正面照片:" prop="bankCardPhotoUrl" :rules="[{required: true,message: '请上传银行卡正面照片'},{min: 0,max: 1000,message: '长度在 0 到 1000 个字符'}]">
	    <!--  <el-input  v-model="form.type"></el-input>	 -->
		  <el-upload
		    :action="action"
			 list-type="picture-card"
		    :on-remove="handleRemove"
			:on-success="onsuccess"
		  :limit="1">
		    <i class="el-icon-plus"></i>
			 <img v-if="form.id!='' && form.id!=undefined" :src="form.bankCardPhotoUrl" class="avatar">
		  </el-upload>
		  
	   </el-form-item>
	   <el-form-item label="请上传开户人身份证正面照片:" prop="khPeopleZPhotoUrl" :rules="[{required: true,message: '请上传开户人身份证正面照片'},{min: 0,max: 1000,message: '长度在 0 到 1000 个字符'}]">
			  <el-upload
			    :action="action"
			  	list-type="picture-card"
			    :on-remove="handleRemove"
			  	:on-success="onsuccessZ"
			  :limit="1">
			    <i class="el-icon-plus"></i>
			  </el-upload>
			 
	   </el-form-item>
	   <el-form-item label="请上传开户人身份证反面照片:" prop="khPeopleFPhotoUrl" :rules="[{required: true,message: '请上传开户人身份证反面照片'},{min: 0,max: 1000,message: '长度在 0 到 1000 个字符'}]">
	   			  <el-upload
	   			    :action="action"
	   			  	list-type="picture-card"
	   			    :on-remove="handleRemove"
	   			  	:on-success="onsuccessF"
	   			  :limit="1">
	   			    <i class="el-icon-plus"></i>
	   			  </el-upload>
	   			 
	   </el-form-item>
	   <el-form-item label="请上传门店相关照片:"  prop="doorwayPhotoUrl" :rules="[{required: true,message: '请上传门店相关照片'},{min: 0,max: 1000,message: '长度在 0 到 1000 个字符'}]">
	   <i class="el-icon-warning">请确保门头照片包含完整的门店名称</i> 
		 <el-upload
		   :action="action"
		 	list-type="picture-card"
		   :on-remove="handleRemove"
		 	:on-success="onsuccessMT"
		 :limit="1">
		   <i class="el-icon-plus">门头照</i>
		 </el-upload>
		 
		 <el-upload
		   :action="action"
		 	list-type="picture-card"
		   :on-remove="handleRemove"
		 	:on-success="onsuccessSN"
		 :limit="1">
		   <i class="el-icon-plus">室内照</i>
		 </el-upload>
		 <el-upload
		   :action="action"
		 	list-type="picture-card"
		   :on-remove="handleRemove"
		 	:on-success="onsuccessSW"
		   :limit="1">
		   <i class="el-icon-plus">室外照片</i>
		 </el-upload>
	   </el-form-item>
	   <el-form-item label="门头照中的门店名称" prop="mdName" :rules="[{required: true,message: '请输入名称'},{min: 0,max: 1000,message: '长度在 0 到 1000 个字符'}]">
	      <el-input  v-model="form.mdName"></el-input>	
	   </el-form-item>
	   
	    </el-form>
	    <div class="el-dialog__footer">
	      <div slot="footer" class="dialog-footer">
	        <el-button @click="cancelReturn()">取 消</el-button>
	        <el-button type="primary" @click="save()">保 存</el-button>
	      </div>
	    </div>
	 </basic-container>
</template>

<script>
	export default {
		
	  name: 'branchstoreAdd',
	  props: {
	    cancelReturn: {
	      type: Function
	    },
		id:{
			type:String
		}
	  },
	  watch: {
	    id: function() {
	  			this.action = this.$http.adornUrl(
	  			  `/branchstore/hotelseller/uploadFile?token=${this.$cookie.get("token")}`
	  			);
	  			if(""!=this.id||this.id!=undefined){
	  			this.getByid(this.id);	
	  			}
	  			
	        
	    }
	  },
	  data() {
	    return {
			action: '',
			typelist:[{
			  value: '1',
			  label: '对私账号'
			}, {
			  value: '2',
			  label: '公有账号'
			}, {
			  value: '3',
			  label: '私人账号'
			}],
			provincelist:[{
			  value: '北京'
			}, {
			  value: '山东'
			}, {
			  value: '上海'
			}],
			citylist:[],
			citylist1:[{
			  value: '大兴'
			}, {
			  value: '丰台'
			}, {
			  value: '朝阳'
			}],
			citylist2:[{
			  value: '德州'
			}, {
			  value: '青岛'
			}, {
			  value: '济南'
			}],
			citylist3:[{
			  value: '黄浦'
			}, {
			  value: '普陀'
			}, {
			  value: '虹口'
			}],
			zhNamelist:[{
			  value: '北京支行'
			}, {
			  value: '山东支行'
			}, {
			  value: '上海支行'
			}],
			
			
	      form: {
	          id: undefined,
	       	//账户类型
	       	type: '',
	       	//银行开户名
	       	bankKhName: undefined,
	       	//银行卡号
	       	bankNo: undefined,
	       	//开户银行
	       	khBank: undefined,
	       	//开户省
	       	khProvince: undefined,
	       	//开户市
	       	khCity: undefined,
	       	//开户支行名称
	       	khZhName: undefined,
	       	//开户人身份证号
	       	khPeopleid: undefined,
	       	//开户人手机号
	       	khPhone: undefined,
	       	//验证码
	       	phoneCode: undefined,
	       	//银行卡正面照片
	       	bankCardPhotoUrl: undefined,
	       	//开户人身份证正面照片
	       	khPeopleZPhotoUrl: undefined,
	       	//开户人身份证反面照片
	       	khPeopleFPhotoUrl: undefined,
	       	//门店门头照片
	       	doorwayPhotoUrl: undefined,
	       	//门店室内照片
	       	indoorPhotoUrl: undefined,
	       	//门店门头照片
	       	outdoorPhotoUrl: undefined,
			
			mdName:undefined
	      },
	    }
	  },

	  created() {
	  	 //this.getByid(this.id);
		 this.action = this.$http.adornUrl(
		   `/branchstore/hotelseller/uploadFile?token=${this.$cookie.get("token")}`
		 );
		 if(""!=this.id||this.id!=undefined){
		 this.getByid(this.id);	
		 }
	  },
	  methods:{
		  getByid(id){
			this.$http({
			  url: this.$http.adornUrl(
			    `/branchstore/hotelseller/getbyid/`+id
			  ),
			  method: "post",
			 
			}).then(({ data }) => {
			    this.form=data.page;
			});
			
				
		  },
		  
		 changeprovine(val){
		    this.form.khCity=undefined;
			 if("北京"==val){
				 this.citylist=this.citylist1;
			 }else if("山东"==val){
				  this.citylist=this.citylist2;
			 }else{
				  this.citylist=this.citylist3;
			 }
		 },
		 save(){
			 console.log(this.form);
			this.$refs["form"].validate(valid => {
			  if (valid) {
			    this.$http({
			      url: this.$http.adornUrl(
			        `/branchstore/hotelseller/${!this.form.id ? "save" : "update"}`
			      ),
			      method: "post",
			      data:this.form,
			    }).then(({ data }) => {
			      if (data && data.code === 0) {
			        this.$message({
			          message: "操作成功",
			          type: "success",
			          duration: 1500,
			          onClose: () => {
			            this.cancelReturn();
			          }
			        });
					
					
			      } else {
			        this.$message.error(data.msg);
			      }
			    });
			  }
			}); 
		 },
		  handleRemove(file, fileList) {
		         console.log(file, fileList);
				 
		       },
		  onsuccess(response, file, fileList){
			   this.form.bankCardPhotoUrl="http://localhost:9002"+file.response.file+`?token=${this.$cookie.get("token")}`;
		  },
		  onsuccessZ(response, file, fileList){
		  			   this.form.khPeopleZPhotoUrl="http://localhost:9002"+file.response.file+`?token=${this.$cookie.get("token")}`;
		  },
		  onsuccessF(response, file, fileList){
		  			   this.form.khPeopleFPhotoUrl="http://localhost:9002"+file.response.file+`?token=${this.$cookie.get("token")}`;
		  },
		  onsuccessMT(response, file, fileList){
		  			   this.form.doorwayPhotoUrl="http://localhost:9002"+file.response.file+`?token=${this.$cookie.get("token")}`;
		  },
		  onsuccessSW(response, file, fileList){
		  			   this.form.outdoorPhotoUrl="http://localhost:9002"+file.response.file+`?token=${this.$cookie.get("token")}`;
		  },
		  onsuccessSN(response, file, fileList){
		  			   this.form.indoorPhotoUrl="http://localhost:9002"+file.response.file+`?token=${this.$cookie.get("token")}`;
		  },
		  
		  
		  
	  }
	  
	  }
</script>

<style>
	
</style>
